<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            margin: 0;
        }
        .nav{
            height: 40px;
            background-color: #333;
            line-height: 40px;
        }

        .nav .nav-content{
            width: 80%;
            margin-left: 10%;
        }
        .nav-content-left{
            float: left;
            height: 40px;
        }

        .nav-content-right{
            float: right;
            height: 40px;
        }
        .nav .nav-content a{
            color:#b0b0b0;
            text-decoration: none;
            font-size:  12px;
        }
        .nav .nav-content span{
            color:#424242;
        }
        .nav .nav-content a:hover{
            color:#fff;
        }

        .content{
            width: 80%;
            margin-left: 10%;
        }
        .content .content-head-left a{
            display: inline-block;
            width: 55px;
            height: 54px;
            background: rgb(255,103,0) url("mi-logo.png");
        }
        .content .content-head{
            height: 100px;
            line-height: 100px;
        }
        .content .content-head-left{
            float: left;
        }
        .content .content-head-center{
            float:left;
        }
        .content .content-head-right{
            float:right;
        }
        .content .content-head-left a{
            margin-top: 23px;
        }
        .content .content-head-left{
            height: 100px;
        }
        .content .content-head-center{
            margin-left: 180px;
        }
        .content .content-head-center a{
            color:#333333;
            text-decoration: none;
            margin-left: 12px;

        }
        .content .content-head-center a:hover{
            color:rgb(255,103,0);
        }
        .content .content-head-right #search-text{
            height: 44px;
            width: 250px;
            font-size: 14px;
        }
        .content .content-head-right #search-btn{
            height: 50px;
            width: 50px;
            font-size: 14px;
        }
        .content-body-left ul{
            margin: 0;
            padding: 0;
            margin-top: 20px;
            /*list-style: none;*/
        }
        .content-body .content-body-left{
            width: 20%;
            height: 460px;
            background-color: rgba(105,101,101,.6);
            float: left;
        }
        .content-body .content-body-right{
            width: 80%;

            background-color: yellow;
            height: 460px;
            float: right;
        }
        .content-body-left ul li{
            height: 42px;
            line-height: 42px;
        }
        .content-body-left ul li:hover{
            background-color: rgb(255,103,0);
        }
        .content-body-left ul li a{
            margin-left: 30px;
            float: left;
        }
        .content-body-left ul li span{
            float:right;
            margin-right: 20px;
        }
        .content-body-right img{
            width:100%;
        }
    </style>

</head>
<body>

<div>

    <div class="nav">
        <div class="nav-content">

            <div class="nav-content-left">
                <a href="">小米商城</a> <span> | </span>
                <a href="">商城</a> <span> | </span>
                <a href="">小米</a> <span> | </span>
                <a href="">小城</a> <span> | </span>
                <a href="">小米商城</a> <span> | </span>
                <a href="">小米城</a> <span> | </span>
                <a href="">小米城</a> <span> | </span>
                <a href="">小米商城</a> <span> | </span>
                <a href="">小米城</a> <span> | </span>
                <a href="">米商城</a> <span> | </span>
                <a href="">小商城</a> <span> | </span>
                <a href="">小米城</a>


            </div>
            <div class="nav-content-right">
                <a href="">登录</a><span> | </span>
                <a href="">注册</a><span> | </span>
                <a href="">消息通知</a>
                <a href="">购物车</a>


            </div>

        </div>

    </div>
    <div class="content">
        <div class="content-head">
            <div class="content-head-left">
                <a href=""></a>
            </div>
            <div class="content-head-center">
                <a href="">小米手机</a>
                <a href="">小机</a>
                <a href="">小米手机</a>
                <a href="">小米手</a>
                <a href="">手机</a>
                <a href="">小米机</a>
                <a href="">小机</a>
                <a href="">小米手机</a>
                <a href="">小手</a>

            </div>
            <div class="content-head-right">
                <input type="text" id="search-text"><input type="submit" id="search-btn">
            </div>
        </div>
        <div class="content-body">
            <div class="content-body-left">
                <ul type="none">
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                    <li>
                        <a href="">手机 电话</a><span>&gt;</span>
                    </li>
                </ul>
            </div>

            <div class="content-body-right">
                <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/056576955e6b8a936bbea4e3fc728a4b.jpg?w=2452&h=920" alt="">
            </div>
        </div>

    </div>


</div>












</body>
<script src="jquery.js"></script>
</html>